<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <link href="./CSS/demo3.css" rel="stylesheet">
</head>
<body>
<div id="root">
    <div class="comm_title">
        <ul>
            <li><input type="checkbox">全选</li>
            <li>商品</li>
            <li>品相</li>
            <li>单价</li>
            <li>数量</li>
            <li>金额</li>
            <li>操作</li>
        </ul>
    </div>
    <div class="comm_content">
        <ul>
            <li>
                <div>
                    <input type="checkbox">
                    <span class="seller">青科大书店</span>
                    <span class="address">山东省济南市历下区</span>
                    <span class="seller_name">店主：想了就行动</span>
                </div>

            </li>
            <li>
                <ul v-for="(comm, index) in commodities">
                    <li>
                        <input type="checkbox"><img :src="comm.comm_img" alt="">
                    </li>
                    <li>{{comm.comm_name}}</li>
                    <li>{{comm.comm_new_old}}</li>
                    <li>￥{{comm.comm_price.toFixed(2)}}</li>
                    <li id="comm_num">
                        <div>
                            <button @click="comm.comm_num > 0 ? comm.comm_num-- : 1">-</button>
                            <input min="1" type="text" v-model="comm.comm_num">
                            <button @click="comm.comm_num++">+</button>
                        </div>
                    </li>

                    <li>￥{{(comm.comm_price * comm.comm_num).toFixed(2)}}</li>
                    <li class="comm_install">
                        <p>移入收藏</p>
                        <p @click="comm_remove(index)">删除</p>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#root",
        data() {
            return {
                commodities: [
                    {
                        id: 1,
                        comm_img: './images/demo4.png',
                        comm_name: '微观经济学线代观点 第九版 范里安格致出版社978798562368',
                        comm_new_old: '八五品',
                        comm_price: 25,
                        comm_num: 1
                    }
                ]
            }
        },
        methods: {
            comm_remove(index) {
                this.commodities.splice(index, 1)
            }
        },
        created() {
        }
    })
</script>

</body>
</html>